<template>
    <div class="big">
        <div class="listbox" ref="listbox">
            <div class="list" v-if="couponList.length!=0">
                <div data-type="0" class="listchild" v-for="(item,index) in couponList" :key="index">
                    <div class="imgshou">
                        <check-icon :value.sync="item.selectbox" @click.native="clicks(item.selectbox)"></check-icon>
                        <div class="conts">
                            <p class="couponName">{{item.couponName}}</p>
                            <p>
                                <span>发放状态:{{item.couponStatus | couponStatus}}</span>
                                <span ref="number">
                                    <x-number v-model="item.number" :min="0" @on-change="change(item.number,item)" class="xnumber" width="30px" ref="xnumber" :fillable=true :max="50"></x-number>
                                </span>
                            </p>
                            <p class="guige">
                                券编号{{item.couponNo}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <show-bg-img :isShow="couponList.length==0"></show-bg-img>
        </div>
        <diV class="shopfoot" v-if="this.couponstatus == '0'">
            <div class="confoot">
                <div class="left">
                    <div class="one">
                        <check-icon :value.sync="checkall" @click.native="selected(checkall)"></check-icon>
                        <p>{{checkall?"取消全选":"全选"}}</p>
                    </div>
                </div>
                <div class="button" @click="settlement()">
                    编辑申请
                </div>
            </div>
        </diV>
        <!-- <div v-if="phoneState">
            <div class="model"></div>
            <div class="phoneTxt">
                <div class="phoneTxt_title">
                    <h3>注意</h3>
                    <h4>请填写用户名和手机号</h4>
                </div>
                <div class="phoneTxt_name"><input v-model="phoneTxt_name" type="text" placeholder="请输入用户名"></div>
                <div class="phoneTxt_phone"><input maxlength="11" v-model="phoneTxt_phone" type="text" placeholder="请输入手机号"></div>
                <div class="phoneTxt_btn">
                    <div @click="phoneState=false">取消</div>
                    <div @click="btnPhone">确定</div>
                </div>
            </div>
        </div> -->
        <reg-phone :isShow="phoneState" @cancel="phoneState=false" @confirm="phoneState=false"></reg-phone>
        <div class="cont"></div>
    </div>
</template>
<script>
// 1实物 2彩票 3券
// payMethod
// 1-RMB
// 2-积分
// 3-RMB+积分
import { XNumber,CheckIcon } from "vux";
import { MessageBox, Toast } from "mint-ui";
import {
    commitCouponApply,
    queryCouponApplyDetail,
    editCouponApply
} from "src/methods/request.js";
import { error } from "util";
import mixins from 'mixins';
export default {
    mixins:[mixins],
    data() {
        return {
            demo1:true,
            checkall: false,
            route: {},
            couponList: [],
            applyNo: "",
            phoneState: false,
            phoneTxt_phone: "",
            phoneTxt_name: "",
            couponstatus: ""
        };
    },
    components: {
        XNumber,
        CheckIcon,
    },
    created() {
        // $router 直接监听无效，尚未查明，故作深拷贝处理
        this.route = Object.assign({}, this.$route);
        this.applyNo = this.route.query.applyNo;
        this.loadData();
    },
    methods: {
        //点击选中列表项
        clicks(val) {
            this.checkall = val && this.couponList.every(item => item.selectbox == val );
        },
        selected(val){
            this.couponList.map(item=>{
                item.selectbox = val;
                return item;
            })
        },
        loadData() {
            this.$vux.loading.show({ text: "Loading" });
            queryCouponApplyDetail({ applyNo: this.applyNo }).then(response => {
                if (response.rspCode == "0000") {
                    this.couponList = response.data.couponDetailList.map(item=>{
                        item.selectbox = false;
                        return item
                    });
                    this.couponstatus = response.data.status;
                } else {
                    Toast({ message: "请求失败", position: "bottom", duration: 1000 });
                }
                this.$vux.loading.hide();
                this.checkall = false;
            })
            .catch(error => {
                console.log(error);
                this.$vux.loading.hide();
            });
        },
        change(value, item) {
            if (value > 50) {
                MessageBox("", "最多50份哟");
            }
        },
        
        //结算
        async settlement() {
            let tyarr = "";
            var noselctarr = [];
            let shoparr = [];
            for (var i = 0; i < this.couponList.length; i++) {
                if (this.couponList[i].selectbox) {
                    shoparr.push(this.couponList[i]);
                }
            }
            if (shoparr.length == 0) {
                MessageBox("", "请选择优惠券");
                return false;
            }
            await editCouponApply({
                couponList: shoparr,
                applyNo: this.applyNo
            })
                .then(response => {
                    if (response.rspCode == "0000") {
                        if (response.data.rspCode == "0000") {
                            MessageBox("", "编辑成功！");
                            this.loadData();
                        } else if (response.data.rspCode == "7012") {
                            this.phoneState = true;
                        } else {
                            MessageBox("", "编辑失败！");
                        }
                    } else {
                        MessageBox("", "申请失败！");
                    }
                })
                .catch(error => console.log(error));
        },
    },
    filters: {
        couponStatus(value) {
            //发券途径
            return { "0": "未审核", "1": "已审核" }[value];
        }
    }
};
</script>
<style lang="less" scoped>
@import "./../../css/ckecked.css";
@import "./index.less";
</style>
 

